<script lang="ts" setup>
import { ref , onMounted ,onUpdated} from 'vue'
import { Delete } from '@element-plus/icons-vue'
import draft from "./card/draft.vue"
import { useRouter } from 'vue-router'
import tool from '@/utils/tool'
import officeRequestService from '@/api/organization/officeRequestService'
import { ElMessage } from 'element-plus'
import Loading from './loading.vue'
const currentUser=tool.data.get("USER_INFO");
const router=useRouter()
onMounted(()=>{
    refreshList()
})
onUpdated(()=>{
    init()
})
//加载
const loading=ref(false)
//获取稿件列表
const refreshList=()=>{
    loading.value=true
    officeRequestService.list(currentUser.id).then((data) => {
            dataList.value=data;
            setDataList();
            loading.value=false
    })
}

const checkAll = ref(false)
const isIndeterminate = ref<boolean>(true)
//选择稿件列表
const checkedCities = ref<string[]>([])
//稿件列表
const cities = []
//初始化稿件列表
const setDataList=()=>{
    for(let i = 0; i < dataList.value.length; i++) {
        cities.push(dataList.value[i].id);
    }
}
const handleCheckAllChange = (val : boolean) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
//稿件列表
const dataList=ref([])
//删除多个稿件
const deleteDraft=()=>{
    //拼接字符串
    let str=checkedCities.value.map((item)=>{
        return item
    }).join(',')
    officeRequestService.delete(str).then((data)=>{
        refreshList()
        ElMessage({
            showClose: true,
            message:data,
            type: 'success',
        })
        
    })
}
//删除单个稿件
const deleteOne=(val:string)=>{
    const checkList=[val]
    let str=checkList.toString()
    officeRequestService.delete(str).then((data)=>{
        refreshList()
        ElMessage({
            showClose: true,
            message:data,
            type: 'success',
        })
        
    })
}
//稿件重命名
const reName=(val:number)=>{
    console.log(val)
    const elementList = document.querySelectorAll(".draft-card")
    elementList[val].children[1].children[0].firstChild.focus()
}
//进来时判断
const come = ()=>{
    //如果还没有选。就置为可见，不为零不用改
    if(checkedCities.value.length == 0) {
        setCheckboxStatus("visibility: visible;")
    }
}
//离开时判断
const leave = ()=>{
    //如果还没有选。就置为不可见，不为零不用改
    if(checkedCities.value.length == 0) {
        setCheckboxStatus("visibility: hidden;")
    }
}
//新增稿件
const edit=(val)=>{
    console.log("新增")
    router.push({ name: "write" , params : { id: val} })
}
//取出重复代码
const setCheckboxStatus=(val)=>{
    //拿到所有的选框
    const checkboxList = document.getElementsByClassName('checkbox-group');  
        for (let j = 0; j < checkboxList.length; j++) {  
            //取出一个
            const checkbox = checkboxList[j]; 
            //当一个没选的时候，将所有的选框置为可见
            checkbox.setAttribute("style",val)
        }
}
//添加事件
const init = ()=>{
    const elementList = document.getElementsByClassName('draft-id')
    for (let i = 0; i < elementList.length; i++) {  
        const element = elementList[i]; 
        if (element) {  
            // 添加mouseenter事件监听器  
            element.addEventListener('mouseenter', function(event) {  
                // 在这里执行你希望在鼠标悬停时运行的代码 
                // console.log("进来")
                come()
            });  
        
            // 添加mouseleave事件监听器（可选）  
            element.addEventListener('mouseleave', function(event) {  
                // 在这里执行你希望在鼠标离开时运行的代码  
                // console.log("离开")
                leave()
            });  
        }
    }
}
</script>
<template>
    <div class="check-box" v-if="checkedCities != ''">
        <div>
            <el-checkbox
                v-model="checkAll"
                :indeterminate="isIndeterminate"
                @change="handleCheckAllChange"
            >
                全选
            </el-checkbox>
        </div>
        <div>
            <el-button type="danger" style="color:#fff;background-color: #f16643;" :icon="Delete" circle @click="deleteDraft"/>
        </div>
    </div>
    <div  class="draft">
        <div class="add" @click="edit('213466s56hg3576sa')">
            <div>
                <el-checkbox-group style="visibility: hidden;">
                    <el-checkbox>
                        &nbsp;
                    </el-checkbox>
                </el-checkbox-group>
            </div>
            <draft style="cursor: pointer;"></draft>
        </div>
        <div v-for="(cardData,index)  in  dataList " class="draft-id">
            <div>
                <div style="display: flex;justify-content: space-between;">
                    <div class="checkbox-group">
                        <el-checkbox-group
                            v-model="checkedCities"
                            @change="handleCheckedCitiesChange"
                            class="el-checkbox-group"
                        >
                            <el-checkbox :key="cities[index]" :label="cities[index]" :value="cities[index]">
                                &nbsp;
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <el-popover
                    :width="50"
                    popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
                    >
                        <template #reference>
                            <button class="my-button">...</button>
                        </template>
                        <template #default>
                            <div>
                                <div class="popover-default" @click="deleteOne(cities[index])">
                                    <el-icon><Delete /></el-icon><p>删除</p>
                                </div>
                                <div class="popover-default" @click="reName(index)">
                                    <el-icon><Edit /></el-icon><p>重命名</p>
                                </div>
                            </div>
                        </template>
                    </el-popover>
                </div>
                
                <draft class="draft-card" :cardData="cardData" style="cursor: pointer;" @click="edit(cardData.id)"></draft>
            </div>
        </div>
        <Loading style="position: absolute;top: calc(100% / 2);left: calc(100% / 2);" v-if="loading"></Loading>
    </div>
</template>
<style lang="scss" scoped>

.check-box{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb( 0,0,0,0.1);
    padding-bottom: 15px;
    /* margin-bottom: 20px; */
}
.draft{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.add{
    transition: 0.2s;
}
.add:hover{
    transform: scale(1.03);
}
.checkbox-group{
    visibility: hidden;
}
.el-checkbox-group{
    translate:3px 25px;
}
.draft-id{
    transition: 0.2s;
}
.draft-id:hover{
    transform: scale(1.03);
}
.my-button{
    outline: none;
    border: 1px solid rgb( 0,0,0,0.1);
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 5px;
    translate: -3px 35px;
}
.my-button:hover{
    background-color: rgb(236, 255, 255);
}
.popover-default{
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 10px;
    border-radius: 3px;
    margin-bottom: 5px;
}
.popover-default:hover{
    background-color: rgb( 0,0,0,0.1);
    cursor: pointer;
}
</style>